<template>
  <component :is="componentType" :info="$props.info" />
</template>

<script lang="ts">
// 页面上的图表组件
import { defineComponent, defineAsyncComponent, computed, ComputedRef } from 'vue';
import {codeCorresponding} from '../../../assets/components/presetComponents' //引入通过code获取对应组件名的函数
// 图表样式
const CurveLineChart = defineAsyncComponent(() => import('../../charts-show/CurveLineChart.vue'));//活跃人数
const BarChart = defineAsyncComponent(() => import('../../charts-show/BarChart.vue'));//部门学时
const BreadChart = defineAsyncComponent(() => import('../../charts-show/BreadChart.vue'));//培训内容占比
const CourseRankingList = defineAsyncComponent(() => import('../../charts-show/CourseRankingList.vue'));//课程排行
const ChinaMapChart = defineAsyncComponent(() => import('../../charts-show/ChinaMapChart.vue'));//地图
const FoldBarChart = defineAsyncComponent(() => import('../../charts-show/FoldBarChart.vue'));//学员贡献
const ScoreRanking = defineAsyncComponent(() => import('../../charts-show/ScoreRanking.vue'));//积分排行
const LearntimeRanking = defineAsyncComponent(() => import('../../charts-show/LearntimeRanking.vue'));//学时排行
const StudyDynamic = defineAsyncComponent(() => import('../../charts-show/StudyDynamic.vue'));//学习动态
const TestDynamic = defineAsyncComponent(() => import('../../charts-show/TestDynamic.vue'));//考试动态

export default defineComponent({
  name: 'ComponentTransform',
  props: {
    info: Object
  },
  components: {
    CurveLineChart,
    BarChart,
    BreadChart,
    CourseRankingList,
    ChinaMapChart,
    FoldBarChart,
    ScoreRanking,
    StudyDynamic,
    TestDynamic,
    LearntimeRanking
  },
  setup(props) {
    console.log(props.info);
    
    const componentType: ComputedRef = computed(() => codeCorresponding[props.info?.code || '']);
    console.log(componentType,'componentType....');
    // 需要将组件名和code对应起来
    // componentType = codeCorresponding.componentType
    return {
      componentType
    };
  }
});
</script>
